<template>
  <el-row>
    <el-col :span="12">
      <div class="flexMiddleCenter pl5">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page.currentPage"
                  :page-sizes="page.pageSizes"
                  :page-size="page.limit"
                  layout="prev, pager, next,jumper"
                  :total="page.total">
          </el-pagination>
      </div>
    </el-col>
    <el-col :span="12" class="textRight pr5">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="page.pageSizes"
                :page-size="page.limit"
                layout="sizes,total"
                :total="page.total">
        </el-pagination>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    props:{
      page:{
        type:Object,
        default:{
          pageSizes: [5, 10, 20]
        }
      },
    },
    data() {
      return {
      }
    },
    computed: {
    },
    mounted() {
    },
    methods: {
      //选择每页显示条数
      handleSizeChange(val) {
        this.page.limit=val;
        this.$emit('changePage',this.page)
      },
      //选择当前第几页
      handleCurrentChange(val) {
        this.page.currentPage=val;
        this.$emit('changePage',this.page)
      }
    },
    components: {},
  }
</script>


<style scoped lang="less">

</style>
